<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制多个点</title>
  </head>
  <body>
    <canvas id="canvasgl" width="800" height="600"> your browse don't suppport webgl </canvas>
    <p>同时绘制多个点</p>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script>
        var VSHADER_SOURCE = `
              attribute vec4 a_Position;
              void main(){
                  gl_Position = a_Position;
                  gl_PointSize = 10.0;
              }
          `;
        
        var FSHADER_SOURCE = `
              precision mediump float;
              uniform vec4 u_FragColor;
              void main(){
                  gl_FragColor = u_FragColor;
              }
          `;

        var canvas = document.getElementById('canvasgl');
        var gl = getWebGLContext(canvas);
        if(!gl) throw new Error("can't get webgl context");

        if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
            throw new Error("can't init shaders");
        }

        var n = initVertextBuffers(gl);
        if(n < 0) throw new Error("failed set positions of vertices");

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.POINTS, 0, n);

        function initVertextBuffers(gl){
            var vertices = new Float32Array([0.0, 0.5, 0.5, 0.5, -0.5, 0.5]);
            var n = 3;

            var vertexBuffer = gl.createBuffer();
            if(!vertexBuffer) throw new Error("can't init vertext buffet");
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

            var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(a_Position);
            return n;
        };
    </script>
  </body>
</html>
